<template>
  <div class="container" :class="{'sign-up-mode':signUpMode}">
    <!-- form表单容器 -->
    <div class="forms-container">
      <div class="signin-signup">
        <!-- 登录 -->
        <!-- :loginUser="loginUser" :loginRules="loginRules" 直接在子组件引入-->
        <LoginForm/>
        <!-- 注册 -->
        <RegisterForm/>
      </div>
    </div>

    <!-- 左右切换动画 -->
    <div class="panels-container">
      <div class="panel left-panel">
        <div class="content">
          <h3>学习是为了有更多的选择,让生活变的更美好!</h3>
          <p>好好学习,天天向上</p>
          <button class="btn transparent" @click="signUpMode = !signUpMode">注册</button>
        </div>
        <img class="image" src="@/assets/img/login.svg" alt="login">
      </div>
      <div class="panel right-panel">
        <div class="content">
          <h3>以人为镜,可明得失 以代码为镜,可通逻辑!</h3>
          <p>学习编程,让你的生活更有趣</p>
          <button class="btn transparent" @click="signUpMode = !signUpMode">登录</button>
        </div>
        <img class="image" src="@/assets/img/register.svg" alt="register">
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import "@/assets/css/loginRegister.css";//登录注册动画切换样式
import LoginForm from "@/components/LoginForm.vue";
import RegisterForm from "@/components/RegisterForm.vue";

// 登录、注册切换
let signUpMode = ref(false);

</script>

<style scoped>
.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 72%;
  width: 32%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}
</style>